<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.jpeg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在 index.html 中添加浏览器兼容性 meta -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI贪吃蛇</title>
      <script src="https://cdn.tailwindcss.com"></script>
      <script>
          tailwind.config = {
              theme: {
                  extend: {
                      animation: {
                          'fade-in': 'fade-in 0.6s ease-out',
                          'glow': 'glow 2s ease-in-out infinite',
                          'float': 'float 3s ease-in-out infinite',
                      },
                      keyframes: {
                          'fade-in': {
                              from: { opacity: '0', transform: 'translateY(20px)' },
                              to: { opacity: '1', transform: 'translateY(0)' }
                          },
                          'glow': {
                              '0%, 100%': { boxShadow: '0 0 5px rgba(16, 185, 129, 0.5)' },
                              '50%': { boxShadow: '0 0 20px rgba(16, 185, 129, 0.8)' }
                          },
                          'float': {
                              '0%, 100%': { transform: 'translateY(0px)' },
                              '50%': { transform: 'translateY(-10px)' }
                          }
                      },
                      colors: {
                          game: {
                              primary: "#10B981",
                              secondary: "#3B82F6",
                              accent: "#F59E0B",
                              danger: "#EF4444",
                              dark: "#1F2937",
                          }
                      },
                      fontFamily: {
                          game: ["Orbitron", "monospace"],
                      }
                  }
              }
          }
      </script>

      <!-- Google Fonts -->
      <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">

      <meta name="description" content="一个功能丰富的Vue贪吃蛇游戏，支持鼠标控制、多食物模式、道具系统等特性" />
      <style>
          /* 防止页面闪烁 */
          body {
              margin: 0;
              padding: 0;
              background: linear-gradient(135deg, #1e1b4b, #1e3a8a, #312e81);
              min-height: 100vh;
              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
          }

          #app {
              min-height: 100vh;
          }

          /* 加载动画 */
          .loading {
              display: flex;
              justify-content: center;
              align-items: center;
              min-height: 100vh;
              color: white;
              font-size: 1.5rem;
          }

          /* 自定义动画 */
          @keyframes fade-in {
              from { opacity: 0; transform: translateY(20px); }
              to { opacity: 1; transform: translateY(0); }
          }

          @keyframes glow {
              0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.5); }
              50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.8); }
          }

          @keyframes float {
              0%, 100% { transform: translateY(0px); }
              50% { transform: translateY(-10px); }
          }

          .animate-fade-in {
              animation: fade-in 0.6s ease-out;
          }

          .animate-glow {
              animation: glow 2s ease-in-out infinite;
          }

          .animate-float {
              animation: float 3s ease-in-out infinite;
          }
      </style>
  </head>
  <body>
    <div id="app">
        <div class="loading">
            🐍 加载中...
        </div>
    </div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>
